import React from 'react';
import './index.css';

function Item(props) {

    return (
        <div className='test-item'>
            <div className='test-question'>
                {(props.index + 1) + '.   ' + props.question}
            </div>
            <div className='test-answers'>
                {props.answer.map((item, index) => {
                    return <div className='test-answer'>
                        <input id={item + index} type="radio" name={props.index} className='test-choose-radio'
                            onClick={() => {
                                let ans;
                                switch (index) {
                                    case 0:
                                        ans = 'A';
                                        break;
                                    case 1:
                                        ans = 'B';
                                        break;
                                    case 2:
                                        ans = 'C';
                                        break;
                                    case 3:
                                        ans = 'D';
                                        break;
                                    default:
                                        ans = null;
                                        break;
                                }
                                props.getAnswer(ans, props.index)
                            }} />
                        <label className='test-choose-answer'>{item}</label>
                    </div>
                })}
            </div>
        </div>
    );
}

export default Item;
